<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>e栈懒人排行 -- 快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/notice.js}"></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>

    <link rel="stylesheet" th:href="@{/css/normalize.css}"></link>
    <link rel="stylesheet" th:href="@{/css/common.css}"></link>
    <style type="text/css">
        .lazyboardCont {
            width: 100%;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardHead {
            width: 100%;
            background-image: linear-gradient(to top, #424890, #f4f4f4);
            box-shadow: 0px 3px 5px #666666;
        }

        .lazyboardHead .lazyboardHeadTitle {
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            color: #fff;
            font-weight: bold;
            background: url(/wximages/sidaibg.png) no-repeat center center;
            background-size: cover;
        }

        .lazyboardCont .lazyboardHead .lazyboardRank {
            width: 100%;
            margin-top: 10px;
            padding-bottom: 10px;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardHead .lazyboardRank .ranknumDiv {
            width: 32%;
            margin-left: 1%;
            padding: 10px 0px;
            float: left;
            position: relative;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum2 {
            width: 40%;
            margin: calc(50% - 40%) auto;
            border-radius: calc(50%);
            border: 2px solid #72d664;
            overflow: hidden;
            box-shadow: 0px 0px 3px #72d664;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum1 {
            width: 50%;
            margin: 0 auto calc(50% - 40%);
            border-radius: calc(50%);
            border: 2px solid #f8ca03;
            box-shadow: 0px 0px 3px #f8ca03;
            overflow: hidden;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum3 {
            width: 40%;
            margin: calc(50% - 40%) auto;
            border-radius: calc(50%);
            border: 2px solid #b66ff3;
            box-shadow: 0px 0px 3px #b66ff3;
            overflow: hidden;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum2Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 15px);
            width: 30px;
            height: 30px;
            background: url(/wximages/ranknum2.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum1Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 17px);
            width: 34px;
            height: 34px;
            background: url(/wximages/ranknum1.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum3Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 15px);
            width: 30px;
            height: 30px;
            background: url(/wximages/ranknum3.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNumName {
            font-size: 12px;
            width: 90%;
            margin: 15px auto 0px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lazyboardCont .lazyboardNavCont {
            width: 88%;
            margin: 30px auto 20px;
            overflow: hidden;
            border: 1px solid #4099eb;
            border-radius: 19px;
            box-shadow: 0px 0px 2px #888888;
        }

        .lazyboardCont .lazyboardNavCont .lazyboardNav {
            width: 33.3%;
            line-height: 38px;
            float: left;
            text-align: center;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
        }

        .lazyboardCont .lazyboardNavCont .lazyboardNavFocus {
            background-image: linear-gradient(to top, #424890, #4099eb);
            color: #fff;
        }

        .boardRankScroll {
            width: 300%;
            margin: 20px 0px;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardRankCont {
            width: calc(100% / 3);
            float: left;
        }

        .lazyboardCont .lazyboardRankCont .lazyboardRankDiv {
            width: 96%;
            height: 52px;
            padding: 10px 2%;
            margin-top: 5px;
            overflow: hidden;
            background: #fff;
            border-top: #f4f4f4;
            border-bottom: #f4f4f4;
            box-shadow: 0px 0px 2px #e1e1e1;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankNumTxt {
            width: 35px;
            padding-right: 15px;
            line-height: 52px;
            text-align: center;
            font-size: 16px;
            font-weight: bolder;
            font-style: italic;
            float: left;
            color: #333333;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankIcon {
            width: 50px;
            height: 50px;
            float: left;
            border: 1px;
            border-radius: 10px;
            overflow: hidden;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankNameTxt {
            width: calc(100% - 50px - 52px - 85px - 10px - 25px);
            color: #333333;
            padding-left: 10px;
            line-height: 52px;
            font-size: 14px;
            float: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankScore {
            width: 95px;
            padding-right: 10px;
            line-height: 52px;
            font-size: 20px;
            font-weight: bolder;
            float: right;
            color: #4099eb;
            text-align: right;
        }

        .tab2, .tab3 {

        }
    </style>
</head>
<body onload="load();">

<div class="content">
    <div class="headerNav">
        <div class="headerNavTop">
            <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
        </div>
        <div class="headerNavCont">
            <a href="./index.html">快递首页</a>
            <a href="./userhome.html">个人中心</a>
            <a href="./delivery.html">送货上门</a>
            <!--<a href="./sendexpress.html">我要寄件</a>
             --> <a href="./lazyboard.html">懒人排行</a>
            <a href="./expassistant.html">快递助手</a>
        </div>
    </div>
    <input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
    <div class="lazyboardCont">
        <div class="lazyboardHead">
            <div class="lazyboardHeadTitle">e栈懒人榜</div>
            <div class="lazyboardRank">
                <div class="ranknumDiv">
                    <div class="ranknum2">
                        <img id="No2Img" src="/images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum2Icon"></div>
                    <div class="rankNumName" id="No2">老王</div>
                </div>
                <div class="ranknumDiv">
                    <div class="ranknum1">
                        <img id="No1Img" src="/images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum1Icon"></div>
                    <div class="rankNumName" id="No1">小马</div>
                </div>
                <div class="ranknumDiv">
                    <div class="ranknum3">
                        <img id="No3Img" src="/images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum3Icon"></div>
                    <div class="rankNumName" id="No3">张三</div>
                </div>

            </div>
        </div>

        <div class="lazyboardNavCont">
            <div class="lazyboardNav lazyboardNavFocus">总排名</div>
            <div class="lazyboardNav">年排名</div>
            <div class="lazyboardNav">月排名</div>
        </div>

        <div class="boardRankScroll">
            <div class="lazyboardRankCont tab1" id="rankAll">
<!--                                <div class="lazyboardRankDiv">-->
<!--                                    <div class="lazyboardRankNumTxt">1</div>-->
<!--                                    <div class="lazyboardRankIcon">-->
<!--                                        <img src="/images/userHeadImg.jpg" width="100%">-->
<!--                                    </div>-->
<!--                                    <div class="lazyboardRankNameTxt">大帅比</div>-->
<!--                                    <div class="lazyboardRankScore">15</div>-->
<!--                                </div>-->
            </div>
            <div class="lazyboardRankCont tab2" id="rankYear">
<!--                                <div class="lazyboardRankDiv">-->
<!--                                    <div class="lazyboardRankNumTxt">1</div>-->
<!--                                    <div class="lazyboardRankIcon">-->
<!--                                        <img src="/images/userHeadImg.jpg" width="100%">-->
<!--                                    </div>-->
<!--                                    <div class="lazyboardRankNameTxt">大帅比</div>-->
<!--                                    <div class="lazyboardRankScore">15</div>-->
<!--                                </div>-->
            </div>
            <div class="lazyboardRankCont tab3" id="rankMonth">
<!--                                <div class="lazyboardRankDiv">-->
<!--                                    <div class="lazyboardRankNumTxt">1</div>-->
<!--                                    <div class="lazyboardRankIcon">-->
<!--                                        <img src="/images/userHeadImg.jpg" width="100%">-->
<!--                                    </div>-->
<!--                                    <div class="lazyboardRankNameTxt">大帅比</div>-->
<!--                                    <div class="lazyboardRankScore">15</div>-->
<!--                                </div>-->
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var dataMonth = null;
    var dataYear = null;
    var dataSum = null;


    var No1NameAll = "第一";
    var No2NameAll = "第二";
    var No3NameAll = "第三";
    var No1NameMonth = "月第一";
    var No2NameMonth = "月第二";
    var No3NameMonth = "月第三";
    var No1NameYear = "年第一";
    var No2NameYear = "年第二";
    var No3NameYear = "年第三";

    var No1ImgAll = "/images/one.jpg";
    var No2ImgAll = "/images/two.jpg";
    var No3ImgAll = "/images/three.jpg";
    var No1ImgMonth = "/images/one.jpg";
    var No2ImgMonth = "/images/two.jpg";
    var No3ImgMonth = "/images/three.jpg";
    var No1ImgYear = "/images/one.jpg";
    var No2ImgYear = "/images/two.jpg";
    var No3ImgYear = "/images/three.jpg";



    $(function () {
        $(".lazyboardNavCont .lazyboardNav").click(function () {
            var windowW = $(window).width();
            if (windowW > 600) {
                windowW = 600;
            }
            var indexnum = $(this).index();
            var focusnum = $(".lazyboardNavCont .lazyboardNav").index($(".lazyboardNavFocus"));
            $(this).siblings().removeClass("lazyboardNavFocus");
            $(this).addClass("lazyboardNavFocus");

            if (indexnum != focusnum) {
                $(".boardRankScroll").stop();

                switch (indexnum) {
                    case 0 :
                        $(".boardRankScroll").animate({"margin-left": "0px"});
                        $("#No1").html(No1NameAll)
                        $("#No2").html(No2NameAll)
                        $("#No3").html(No3NameAll)
                        $("#No1Img").attr('src',No1ImgAll)
                        $("#No2Img").attr('src',No2ImgAll)
                        $("#No3Img").attr('src',No3ImgAll)

                        break;
                    case 1 :
                        $(".boardRankScroll").animate({"margin-left": -windowW + "px"});
                        $("#No1").html(No1NameYear)
                        $("#No2").html(No2NameYear)
                        $("#No3").html(No3NameYear)
                        $("#No1Img").attr('src',No1ImgYear)
                        $("#No2Img").attr('src',No2ImgYear)
                        $("#No3Img").attr('src',No3ImgYear)
                        break;
                    case 2 :
                        $(".boardRankScroll").animate({"margin-left": -windowW * 2 + "px"});
                        $("#No1").html(No1NameMonth)
                        $("#No2").html(No2NameMonth)
                        $("#No3").html(No3NameMonth)
                        $("#No1Img").attr('src',No1ImgMonth)
                        $("#No2Img").attr('src',No2ImgMonth)
                        $("#No3Img").attr('src',No3ImgMonth)
                        break;
                }
            }
        });
    });
    $(function () {
        $.getJSON("/e/wx/getRankMonth", null, function (data) {
            //images/userHeadImg.jpg dataMonth[i].img==0?'images/userHeadImg.jpg':dataMonth[i].img
            dataMonth = data.data.rankMonth;
            console.log(dataMonth);
            console.log(dataMonth[1].sum);
            console.log(dataMonth.length);
            for (let i = 0; i < dataMonth.length; i++) {
                let img = dataMonth[i].img==0 ? "/images/userHeadImg.jpg" :dataMonth[i].img
                var item = "<div class=\"lazyboardRankDiv\">\n" +
                    "                    <div class=\"lazyboardRankNumTxt\">" + (i + 1) + "</div>\n" +
                    "                    <div class=\"lazyboardRankIcon\">\n" +
                    "                        <img src="+img+"  width=\"100%\">\n" +
                    "                    </div>\n" +
                    "                    <div class=\"lazyboardRankNameTxt\">" + dataMonth[i].username + "</div>\n" +
                    "                    <div class=\"lazyboardRankScore\">" + dataMonth[i].sum + "</div>\n" +
                    "                </div>";
                $("#rankMonth").append($(item));
            }
            //前三名填充数据
            No1NameMonth = dataMonth[0].username
            No2NameMonth = dataMonth[1].username
            No3NameMonth = dataMonth[2].username
             No1ImgMonth = dataMonth[0].img==0 ? "/images/userHeadImg.jpg" :dataMonth[0].img
             No2ImgMonth = dataMonth[1].img==0 ? "/images/userHeadImg.jpg" :dataMonth[1].img
             No3ImgMonth = dataMonth[2].img==0 ? "/images/userHeadImg.jpg" :dataMonth[2].img


        });
        $.getJSON("/e/wx/getRankYear", null, function (data) {
            dataYear = data.data.rankYear;
            for (let i = 0; i < dataYear.length; i++) {
                let img = dataYear[i].img==0 ? "/images/userHeadImg.jpg" :dataYear[i].img
                var item = "<div class=\"lazyboardRankDiv\">\n" +
                    "                    <div class=\"lazyboardRankNumTxt\">" + (i + 1) + "</div>\n" +
                    "                    <div class=\"lazyboardRankIcon\">\n" +
                    "                        <img src="+img+"  width=\"100%\">\n" +
                    "                    </div>\n" +
                    "                    <div class=\"lazyboardRankNameTxt\">" + dataYear[i].username + "</div>\n" +
                    "                    <div class=\"lazyboardRankScore\">" + dataYear[i].sum + "</div>\n" +
                    "                </div>";
                $("#rankYear").append($(item));
            }
            //前三名填充数据
            No1NameYear = dataYear[0].username
            No2NameYear = dataYear[1].username
            No3NameYear = dataYear[2].username
             No1ImgYear = dataYear[0].img==0 ? "/images/userHeadImg.jpg" :dataYear[0].img
             No2ImgYear = dataYear[1].img==0 ? "/images/userHeadImg.jpg" :dataYear[1].img
             No3ImgYear = dataYear[2].img==0 ? "/images/userHeadImg.jpg" :dataYear[2].img

        });
        $.getJSON("/e/wx/getRankAll", null, function (data) {
            dataAll = data.data.rankAll;
            for (let i = 0; i < dataAll.length; i++) {
                let img = dataAll[i].img==0 ? "/images/userHeadImg.jpg" :dataAll[i].img
                var item = "<div class=\"lazyboardRankDiv\">\n" +
                    "                    <div class=\"lazyboardRankNumTxt\">" + (i + 1) + "</div>\n" +
                    "                    <div class=\"lazyboardRankIcon\">\n" +
                    "                        <img src="+img+"  width=\"100%\">\n" +
                    "                    </div>\n" +
                    "                    <div class=\"lazyboardRankNameTxt\">" + dataAll[i].username + "</div>\n" +
                    "                    <div class=\"lazyboardRankScore\">" + dataAll[i].sum + "</div>\n" +
                    "                </div>";
                $("#rankAll").append($(item));
            }
            //前三名填充数据
            $("#No1").html(dataAll[0].username)
            $("#No1Img").attr('src',dataAll[0].img==0 ? "/images/userHeadImg.jpg" :dataAll[0].img);
            $("#No2").html(dataAll[1].username)
            $("#No2Img").attr('src',dataAll[1].img==0 ? "/images/userHeadImg.jpg" :dataAll[0].img);
            $("#No3").html(dataAll[2].username)
            $("#No3Img").attr('src',dataAll[2].img==0 ? "/images/userHeadImg.jpg" :dataAll[0].img);
            No1NameAll = dataAll[0].username
            No2NameAll = dataAll[1].username
            No3NameAll = dataAll[2].username
             No1ImgAll = dataAll[0].img==0 ? "/images/userHeadImg.jpg" :dataAll[0].img
             No2ImgAll = dataAll[1].img==0 ? "/images/userHeadImg.jpg" :dataAll[1].img
             No3ImgAll = dataAll[2].img==0 ? "/images/userHeadImg.jpg" :dataAll[2].img

        });
    });

</script>
</body>
</html>